<!--  -->
<template>
  <div class="account">
    <div class="account-top">
      <i class="iconfont icon-zuojiantou" @click="$router.push('/my')"></i>
      <div>我的账户</div>
    </div>
    <div class="account-main">
      <div class="account-main2">
        <div class="account-main-box">
          <div class="account-main-box-top">
            <div class="total-assets">
              <div>总资产(元)</div>
              <div>0.00</div>
            </div>
            <div class="recharge" @click="flagRecharge">充值</div>
          </div>
          <div class="rechargeBox" v-show="rechargeFlag">
            <button @click="$router.push('/recharge')">充值未绑卡</button>
            <button @click="$router.push('/recharge')">充值已绑卡</button>
          </div>
          <div class="account-main-box-foot">
            <div class="cumulative-recharge">
              <div>累计充值(元)</div>
              <div>0</div>
            </div>
            <div class="cumulative-consumption">
              <div>累计消费(元)</div>
              <div>0</div>
            </div>
          </div>
        </div>
        <div class="account-main-nav">
          <dl @click="$router.push('/bankCard')">
            <dt>
              <i class="iconfont icon-yinhangqia"></i>
            </dt>
            <dd>银行卡</dd>
          </dl>
          <dl @click="$router.push('/record')">
            <dt>
              <i class="iconfont icon-xiaofeijilu"></i>
            </dt>
            <dd>消费记录</dd>
          </dl>
          <dl>
            <dt>
              <i class="iconfont icon-jifenzhongxin"></i>
            </dt>
            <dd>积分中心</dd>
          </dl>
        </div>
        <div class="account-main-nav2">
          <div class="account-main-nav2-left">
            <div class="account-main-nav2-left-div">
              <div>签到领积分</div>
              <div>赚积分抵现金</div>
            </div>
            <i class="iconfont icon-lihe"></i>
          </div>
          <div class="account-main-nav2-right">
            <div class="account-main-nav2-right-div">
              <div>领取优惠券</div>
              <div>满减享优惠</div>
            </div>
            <i class="iconfont icon-hongbao"></i>
          </div>
        </div>
      </div>
      <div class="account-main-nav3">
        <div class="account-main-nav3-top">
          <div class="account-main-nav3-top-left"></div>
          <i class="iconfont icon-lingxing"></i>
          <div class="account-main-nav3-top-center">热门推荐</div>
          <i class="iconfont icon-lingxing"></i>
          <div class="account-main-nav3-top-right"></div>
        </div>
        <div class="account-main-nav3-main">
          <img src="../../assets/my/my_img2.jpg" alt="" />
        </div>
      </div>
    </div>
    <div class="account-foot">
      <i class="iconfont icon-zuojiantou"></i>
      <i class="iconfont icon-youjiantou_huaban"></i>
    </div>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      rechargeFlag: false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    flagRecharge() {
      this.rechargeFlag = !this.rechargeFlag;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="scss" scoped>
.account {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.account-top {
  height: 3.125rem;
  display: flex;
  align-items: center;
  background: rgb(233, 233, 233);
}
.account-top i {
  font-size: 1.5rem;
}
.account-top div {
  width: 90%;
  text-align: center;
  font-weight: bold;
  line-height: 3.125rem;
}
.account-main {
  flex: 1;
  overflow: auto;
  background: #eee;
}
.account-main2 {
  background: #fff;
  padding-top: 5%;
}
.account-foot {
  height: 3.125rem;
  display: flex;
  justify-content: center;
  background: #eee;
  align-items: center;
}
.account-foot i {
  font-size: 1.5rem;
  color: rgb(194, 194, 194);
  padding: 0 1.875rem;
  font-weight: bold;
}
.account-foot i:nth-child(1) {
  color: rgb(109, 109, 109);
}
.account-main-box {
  width: 90%;
  height: 11.25rem;
  background: red;
  border-radius: 0.315rem;
  margin: 0 auto;
}
.account-main-box-top {
  height: 40%;
  width: 90%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
}
.account-main-box-foot {
  height: 60%;
}
.account-main-box-top,
.account-main-box-foot {
  width: 90%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
}
.total-assets div:nth-child(1) {
  font-size: 0.875rem;
  color: rgb(223, 223, 223);
}
.cumulative-recharge div:nth-child(1),
.cumulative-consumption div:nth-child(1) {
  font-size: 12px;
}
.total-assets div:nth-child(2) {
  color: #fff;
  font-size: 1.875rem;
}
.cumulative-recharge div:nth-child(2),
.cumulative-consumption div:nth-child(2) {
  font-size: 1.4375rem;
  color: #fff;
}
.recharge {
  width: 5rem;
  height: 1.875rem;
  background: #fff;
  color: rgb(243, 101, 101);
  border-radius: 1.25rem;
  line-height: 1.875rem;
  text-align: center;
}
.rechargeBox {
  width: 6.25rem;
  height: 5rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  border: 0.0625rem solid #000;
  position: fixed;
  right: 0rem;
  top: 7.5625rem;
  border-radius: 0.1875rem;
}
.rechargeBox button {
  width: 90%;
  height: 1.875rem;
  border-radius: 0.1875rem;
  border: 0.0625rem solid rgb(75, 75, 75);
  font-size: 0.875rem;
  margin: 5% 5% 0 5%;
}
.cumulative-recharge div:nth-child(1),
.cumulative-consumption div:nth-child(1) {
  color: rgb(223, 223, 223);
  font-size: 0.75rem;
}
.account-main-nav {
  height: 5rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  border-bottom: 0.0625rem solid rgb(231, 231, 231);
  background: rgb(255, 255, 255);
  width: 98%;
  margin: 0 auto;
}
.account-main-nav dl dt i {
  font-size: 1.5rem;
  color: red;
}
.account-main-nav dl dd {
  color: rgb(192, 192, 192);
  font-size: 0.875rem;
  padding: 0.125rem 0;
}
.account-main-nav2 {
  width: 95%;
  height: 5rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  margin: 0 auto;
}
.account-main-nav2 i {
  font-size: 1.875rem;
}
.account-main-nav2-left i {
  color: rgb(255, 166, 0);
}
.account-main-nav2-right i {
  color: red;
}
.account-main-nav2-left,
.account-main-nav2-right {
  width: 45%;
  height: 3.75rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-radius: 0.1875rem;
}
.account-main-nav2-left {
  background: rgb(253, 230, 187);
}
.account-main-nav2-right {
  background: rgb(253, 221, 226);
}
.account-main-nav2-left-div div:nth-child(1),
.account-main-nav2-right-div div:nth-child(1) {
  color: rgb(248, 20, 3);
  font-weight: bold;
}
.account-main-nav2-left-div div:nth-child(2),
.account-main-nav2-right-div div:nth-child(2) {
  font-size: 0.875rem;
  color: rgb(255, 36, 36);
}
.account-main-nav3 {
  background: #fff;
  margin-top: 0.625rem;
}
.account-main-nav3-top {
  width: 100%;
  height: 3.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.account-main-nav3-top i {
  font-size: 0.75rem;
}
.account-main-nav3-top-left,
.account-main-nav3-top-right {
  width: 3.75rem;
  height: 0.0625rem;
  background: #000;
  margin: 0 0.3125rem;
}
.account-main-nav3-top-center {
  width: 6.25rem;
  text-align: center;
}
.account-main-nav3-main img {
  width: 100%;
}
</style>
